<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-11-25 23:21:17
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-12-18 21:32:54
 * @FilePath: \dance\pages\collect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="collect">
    <view class="collect-wrap">
      <!-- 头部 -->
      <uv-status-bar bgColor="#fff"></uv-status-bar>
      <!--自定义头部 -->
      <z-navbar title="我的收藏"></z-navbar>
      <uv-tabs
        :list="list"
        :current="current"
        @change="tabsChange"
        :activeStyle="{
          color: '#000000',
          fontWeight: 'bold',
          fontSize: '16px'
        }"
        :inactiveStyle="{
          color: '#959595',
          fontSize: '16px'
        }"
        itemStyle="flex:1; margin-bottom: 10px;"
        lineWidth="139.535rpx"
        lineColor="rgba(255, 122, 102, 1)"
      ></uv-tabs>
    </view>
    <view class="collect-main">
      <swiper :current="current" @change="swiperChange" class="collect-main-swiper">
        <swiper-item class="swiper-item">
          <lesson :current="current" :top="top"></lesson>
        </swiper-item>
        <swiper-item class="swiper-item">
          <videos :current="current" :top="top"></videos>
        </swiper-item>
        <swiper-item class="swiper-item">
          <teacher :current="current" :top="top"></teacher>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
  import { ref, getCurrentInstance, watch, reactive, nextTick } from 'vue';
  const instance = getCurrentInstance();
  import { onReady } from '@dcloudio/uni-app';
  import lesson from './components/lesson.vue';
  import videos from './components/videos.vue';
  import teacher from './components/teacher.vue';
  const query = uni.createSelectorQuery().in(instance.proxy);
  let top = ref(0);
  onReady(() => {
     query
      .select('.collect-main')
      .boundingClientRect(data => {
        top.value = data.top;
      })
      .exec();
  });
  let list = [{ name: '课程' }, { name: '视频' }, { name: '老师' }];
  let current = ref(0);
  const tabsChange = e => {
    current.value = e.index;
  };
  const swiperChange = val => {
    current.value = val.detail.current;
  };
</script>

<style lang="scss" scoped>
  .collect {
    background: rgba(250, 250, 250, 1);
    height: 100vh;
    color: #fff;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    color: rgba(0, 0, 0, 1);
    font-family: Source Han Sans CN;
    font-size: 24.419rpx;
    &-wrap {
      box-shadow: 0px 2px 4px 0px #00000040;
      padding-bottom: 20.93rpx;
    }
    &-main {
      flex: 1;
      &-swiper {
        height: 100%;
      }
    }
  }
</style>
